<script lang="ts" setup>
import { title } from 'process';


    const productData=[
        {id:1,title:'ljh',des:'mjj'},
        {id:2,title:'ly',des:'mjj'},
        {id:3,title:'hxd',des:'mjj'},
    ]


</script>
<template>
<div class="main">
        <div class="header">
             <h1>产品管理内容</h1>
        </div>
    <div class="main_body">
        <div class="sbar">
            <ul>
                <!-- <li v-for="item in productData" :key="item.id"><router-link to="/product/details?title=${item.title}&id=${item.id}">{{item.title}}</router-link></li> -->
                <!-- <li v-for="item in productData" :key="item.id"><router-link :to="'/product/details/${item.id}/${item.title}'">{{item.title}}</router-link></li> -->
                <!-- <li v-for="item in productData" :key="item.id">
                    <router-link :to="{
                        name:'details',
                        query:{
                            title:item.title,
                            id:item.id
                        }
                }">{{item.title}}</router-link></li> -->
                
                    
            <li v-for="item in productData" :key="item.id">
                    <router-link :to="{
                        name:'details',
                        params:{
                            title:item.title,
                            id:item.id
                        }
                }">{{item.title}}</router-link></li>
            </ul>
        </div>
         <div class="content">
             <router-view class="com"></router-view>
        </div>
    </div>

</div>


</template>
<style scoped>
    .sbar{
        width: 300px;
        background-color: red;
    }
    .main{
        display: flex;
        flex-direction: column;
    }
    .main_body{
        display: flex;
    }
    ul{
        list-style: none;
        margin: 0px;
        padding: 0px;
    }
    ul>li{
        margin: 20px;
    }
    .content{
        width: 100%;
    }
    li>a{
    text-decoration: none;
    color: green;
    }
    .com{
        height: 70vh;
    }
</style>